<template>
  <div class="div">
    <PageTitle title="活动推荐" :addUrl="user_state == 1?'/activity/activityDetail/none':''"></PageTitle>
    <el-table stripe :data="tableData">
      <el-table-column prop="id" label="id" width="80"></el-table-column>
      <el-table-column prop="channel_name" label="活动名称"></el-table-column>
      <el-table-column width="120" prop="receive" label="领取次数"></el-table-column>
      <el-table-column  label="活动时间">
        <template slot-scope="scope">
          {{scope.row.start_at}}至{{scope.row.end_at}}
        </template>
      </el-table-column>
      <el-table-column  label="领取记录" width="120">
        <template slot-scope="scope">
          <el-button class="button" size="mini" type="primary" @click="recording(scope.row.id)" >查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link
            :to="user_state == 1?`/activity/activityDetail/${scope.row.id}`:`/activity/activityList/${scope.row.id}`"
            class="el-button el-button--text"
          >查看</router-link>
          <el-button type="text" @click="qrcode(scope.row.id,scope.row.channel_name)">生成二维码</el-button>
          <router-link
            v-if="user_state == 1"
            :to="'/activity/activityList/' + scope.row.id"
            class="el-button el-button--text"
          >产品列表</router-link>
          <el-button v-if="user_state == 1" type="text" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChange"
        :page-size="pageSize"
        :total="totalCount"
        :current-page="pageNum"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>
    <el-dialog :visible.sync="qrcodeShow" width="30%" @close="closeCode">
      <div class="qrcode" id="qrcode" ref="qrCodeUrl"></div>
      <span slot="footer" class="dialog-footer">
        <a id="downloadImg"></a>
        <el-button class="button" @click="downloadImg" title="下载">下载</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="recordingShow" width="30%">
      <div class="recording">
        <h1>总共兑换用户：{{recordingData.length}}人</h1>
        <el-table :data="recordingData">
          <el-table-column property="create_at" label="领取日期" width="200"></el-table-column>
          <el-table-column property="nikname" label="领取用户"></el-table-column>
          <el-table-column property="username" label="引入者"></el-table-column>
        </el-table>
        <!-- <div class="item">
          <div class="name">
            用户：xxxxxxx
          </div>
          <div class="time">
            领取时间：2020-07-13
          </div>
        </div> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="recordingShow = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PageTitle from "@/components/pageTitle/PageTitle.vue";
import QRCode from "qrcodejs2";
export default {
  name: "RechargeList",
  components: {
    PageTitle
  },
  activated() {
    this._getList();
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      qrcodeShow: false,
      recordingShow:false,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
      name:null,
      user_state:localStorage.getItem('user_state'),
      recordingData:[],//领取人数
    };
  },
  methods: {
    async recording(id){
      console.log('查看领取记录--------',id)
       this.recordingShow = true
      let {data:{code,data}} = await this.$axios({
        url: this.$api + "/v1/channel/change",
        method: "GET",
        params: {
          channel_id:id
        }
      })
      console.log('领取记录--------------',data)
      if (code == 0) {
        data.item.forEach((item,index)=>{
          item.nikname = data.nike[index]
        })
        console.log('替换后------',data)
        this.recordingData = data.item
      }else{
        this.recordingData = []
      }
     
    },
    //下载二维码
    downloadImg() {
      var img = document
        .getElementById("qrcode")
        .getElementsByTagName("img")[0];
      // 构建画布
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      canvas.getContext("2d").drawImage(img, 0, 0);
      // 构造url
      var url = canvas.toDataURL("image/png");
      document.getElementById("downloadImg").setAttribute("href", url);
      document
        .getElementById("downloadImg")
        .setAttribute("download", `${this.name}.jpg`);
      document.getElementById("downloadImg").click();
    },
    //生成二维码
    qrcode(id,name) {
      this.qrcodeShow = true;
      this.name = name
      this.$nextTick(() => {
        this.crateQrcode(id);
      });
    },
    crateQrcode(id) {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: `https://www.youjingxi.com.cn/activity?id=${id}&userid=${localStorage.getItem('user_id')}`, // 需要转换为二维码的内容
        //text:`https://www.youjingxi.com.cn/activity?id=4&userid=12`,
        width: 150,
        height: 150,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    // 关闭弹框,清除已经生成的二维码
    closeCode() {
      this.$refs.qrCodeUrl.innerHTML = "";
    },
    //获取活动列表
    async _getList() {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/channel/show",
        method: "GET",
        params: {
          size: this.pageSize,
          page: this.pageNum
        }
      });
      if (code === 0) {
        if (data.items) {
          this.tableData = data.items;
          this.totalCount = parseInt(data.pages.totalCount);
        } else {
          this.tableData = [];
        }
      }
    },
    del(id) {
      this.$confirm("确认删除吗？", "提示", {
        type: "warning"
      }).then(() => {
        this._del(id);
      });
    },
    async _del(id) {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/channel/trial",
        method: "POST",
        data: {
          id
        }
      });
      if (code == 0) {
        this.$message.success(data);
        this._getList();
      }
    },
    pageChange(pageNum) {
      this.pageNum = pageNum
      this._getList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/select-bar.scss";
.list-img {
  width: 80%;
  height: 60px;
  cursor: pointer;
}
.el-button--text {
  text-decoration: none;
}
.qrcode{
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
.recording .item{
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  border-bottom: 1px solid #f0f0f0;
  line-height: 24px;
}
</style>
